/* src/styles/global.css */
/* 1. 吸顶导航栏样式（用于需要固定在顶部的导航栏，如 Popular.vue 页面） */
.global-sticky-nav {
  position: fixed; /* 固定定位，滚动时始终显示 */
  top: 0;
  left: 0;
  width: 100%; /* 占满屏幕宽度 */
  z-index: 999; /* 层级最高，避免被其他元素遮挡 */
  background-color: #ffffff; /* 白色背景，避免透明穿透 */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05); /* 轻微阴影，增强层级感 */
}

/* 2. 页面内容区基础样式（配合吸顶导航栏，避免内容被遮挡） */
/* 适用于：只有吸顶导航栏的页面（如 Popular.vue） */
.global-content-with-nav {
  padding-top: 46px; /* 导航栏默认高度46px，预留顶部空间 */
  background-color: #f5f5f5;
  min-height: 100vh; /* 占满屏幕高度 */
}

/* 3. 页面内容区样式（配合“顶部搜索栏+其他内容”，如当前 WedDress.vue 页面） */
.global-content-with-search {
  padding-top: 56px; /* 顶部搜索栏高度56px，预留空间 */
  background-color: #f5f5f5;
  min-height: 100vh;
}

/* 4. 通用卡片间距（统一 CellGroup 组件的外边距，避免重复写内联样式） */
.global-cell-group {
  margin: 16px !important; /* 覆盖 Vant 默认样式，统一间距 */
}

/* 5. 商家列表项样式（统一商家卡片的内边距和布局） */
.global-shop-item {
  padding: 8px 10px !important; /* 统一商家项内边距 */
}

